$(function () {
  load()
  $("#title").on("keydown", function (e) {
    // 判断按键按下
    if (e.keyCode == 13) {
      if ($(this).val().length == 0) {
        alert("请输入内容")
      } else {
        // local 是一个空的数组
      var local = getData()
      // 添加我们输入的数据
      local.push({ title: $(this).val(), done: false })
      // 保存我们输入的数据
      saveData(local)
      load()
      $(this).val("")
      }
    }
  })

// 删除li
  $("ol,ul").on('click', 'a', function () {
    // 获取本地缓存
    let data = getData()
// 修改数据
    let index = $(this).attr("id")
    data.splice(index, 1)
    // 保存我们输入的数据
    saveData(data)
    //渲染数据
    load()
    

  })

  // 正在进行和已完成操作
  $("ul,ol").on("click", "input", function () {
    let data = getData()
    let index = $(this).siblings("a").attr("id")
   
    
    data[index].done = $(this).prop("checked")
    // 重新保存数据
    saveData(data)
    // 重新渲染数据
    load()


  })


// 获取本地存储的数据
  function getData() {
    let data = localStorage.getItem('todolist')
    if (data != null) {
      data = JSON.parse(data)
      return data
    } else {
      return []
    }
  }

  // 保存本地数据
 function saveData(data){
    localStorage.setItem("todolist",JSON.stringify(data))
  }

  // 加载dom
  function load() {
    let data = getData()
    console.log(data);
    //清空标签
    $('ol,ul').empty()
   let todoCount = 0
   let doneCount = 0
    //遍历数据
    $.each(data, function (index, val) {
      if (val.done) {
        $('ul').prepend('<li> <input type="checkbox" checked="checked" /> <p>'+val.title + '</p> <a id= '+index+' href="javascript:;"></a> </li>')
         doneCount++
      } else {
        $('ol').prepend('<li> <input type="checkbox"/> <p>'+val.title + '</p> <a id= '+index+' href="javascript:;"></a> </li>')
        todoCount++
      }
     

    })
  $("#todocount").text(todoCount)
  $("#donecount").text(doneCount)


  }
  

})